﻿<!--更多资源：https://gitee.com/iGaoWei/big-data-view -->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="refresh" content="300;url='http://mtw.so/5FRdFE'"> -->
    <script type="text/javascript" src="/customer/static/bi/js/jquery.js"></script>
    <script type="text/javascript" src="/customer/static/bi/js/echarts.min.js"></script>
    <script type="text/javascript" src="/customer/static/bi/js/js.js"></script>
    <script type="text/javascript" src="/customer/static/bi/js/jquery.limarquee.js"></script>
    <script type="text/javascript" src="/customer/static/bi/js/jquery.cxselect.min.js"></script>
    <link rel="stylesheet" href="/customer/static/bi/css/comon0.css">
</head>
<body>
<div style="background:#000d4a url(/customer/static/bi/images/bg.jpg) center top;">
    <div class="loading">
        <div class="loadbox"><img src="/customer/static/bi/picture/loading.gif"> 页面加载中...</div>
    </div>
    <div class="back"></div>
    <div class="head">
        <h1>大数据可视化展示平台通用模板</h1>
        <div class="weather"><span id="showTime"></span></div>
    </div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height:545px;">

                    <div class="navboxall">
                        <div class="sycm">
                            <ul class="clearfix">
                                <li>
                                    <h2>22864</h2>
                                    <span>总金额</span></li>
                                <li>
                                    <h2>1572</h2>
                                    <span>数量</span></li>

                            </ul>

                        </div>

                        <ul class="jindu clearfix">
                            <div>{{length}}</div>
                            <div>{{length}}</div>
                            <li id="zb1"></li>
                            <li id="zb2"></li>
                            <li id="zb3"></li>
                            <li id="zb4"></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:545px">
                    <div class="alltitle">标题样式</div>
                    <div class="navboxall" id="echart4"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:260px">
                    <div class="alltitle">标题样式</div>
                    <div class="navboxall" id="echart1"></div>
                </div>
                <div class="boxall" style="height:270px">
                    <div class="alltitle">标题样式</div>
                    <div class="navboxall" id="echart2"></div>
                </div>
            </li>
        </ul>
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height:390px;">
                    <div class="alltitle">标题样式</div>
                    <div class="navboxall">
                        <div class="wraptit"><span>订单号</span><span>订单金额</span><span>计划时间</span><span>当前状态</span></div>
                        <div class="wrap">
                            <ul>
                                {% for i in orders_data %}
                                <li>
                                    <p><span>{{i.name}}</span><span>{{i.width}}</span><span>{{i.height}}</span><span>{{i.color}}</span><span>{{i.date_start}}</span></p>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
            <li style="width:38%">
                <div class="boxall" style="height:390px">
                    <div class="alltitle">标题样式</div>
                    <div class="navboxall" id="echart3"></div>
                </div>
            </li>
            <li style="width:38%">
                <div class="boxall" style="height:390px">
                    <div class="alltitle">标题样式</div>
                    <div class="navboxall" id="echart5"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

<script>

    $(function () {
        $('.wrap').liMarquee({
            direction: 'up',//身上滚动
            runshort: false,//内容不足时不滚动
            scrollamount: 20, //速度
            drag: true

        });
    });
</script>

</body>
</html>
